<template>
  <el-container>
    <el-header
      style="
          text-align: center;
          line-height: 60px;box-shadow: 0 1px 4px rgb(0 21 41 / 8%)">
      <public-header>
        <template slot="center">个人设置</template>
      </public-header>
    </el-header>
    <el-main style="padding: 0;">
      <div class="content">
        <div class="avater">
          <el-avatar :size="50" :src="'../../static/register/teacher.svg'"></el-avatar>
        </div>
        <div class="detail">
          <el-card shadow="always" class="card">
            <el-divider content-position="left">用户名</el-divider>
            <div class="value">
              <span class="leftValue" v-if="showEdit !== 'username'">{{ userInfo.username }}</span>
              <el-input class="leftValue" v-else v-model="newUserInfo.username" placeholder="请输入姓名"
                        clearable></el-input>

              <div class="rightBtn">
                <div v-if="showEdit !== 'username'" @click="statusChanged('username')">
                  <i class="el-icon-edit"></i>
                </div>
                <div v-else-if="showEdit === 'username'">
                  <div class="save" @click="clickedSave">
                    <i class="el-icon-document-checked"></i>
                  </div>
                  <div class="cancel" @click="statusChanged('')">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <el-card shadow="always" class="card">
            <el-divider content-position="left">年龄</el-divider>
            <div class="value">
              <span class="leftValue" v-if="showEdit !== 'age'">{{ userInfo.age }}</span>
              <el-input class="leftValue" v-else v-model.number="newUserInfo.age" placeholder="请输入你的年龄"></el-input>

              <div class="rightBtn">
                <div v-if="showEdit !== 'age'" @click="statusChanged('age')">
                  <i class="el-icon-edit"></i>
                </div>
                <div v-else-if="showEdit === 'age'">
                  <div class="save" @click="clickedSave">
                    <i class="el-icon-document-checked"></i>
                  </div>
                  <div class="cancel" @click="statusChanged('')">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <el-card shadow="always" class="card">
            <el-divider content-position="left">性别</el-divider>
            <div class="value">
              <span class="leftValue" v-if="showEdit !== 'gender'">{{ userInfo.gender === 1 ? '男' : '女' }}</span>
              <div class="leftValue" v-else>
                <el-radio-group v-model="newUserInfo.gender">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="0">女</el-radio>
                </el-radio-group>
              </div>

              <div class="rightBtn">
                <div v-if="showEdit !== 'gender'" @click="statusChanged('gender')">
                  <i class="el-icon-edit"></i>
                </div>
                <div v-else-if="showEdit === 'gender'">
                  <div class="save" @click="clickedSave">
                    <i class="el-icon-document-checked"></i>
                  </div>
                  <div class="cancel" @click="statusChanged('')">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <el-card shadow="always" class="card">
            <el-divider content-position="left">教育背景</el-divider>
            <div class="value">
              <span class="leftValue" v-if="showEdit !== 'educationBgm'">{{ userInfo.educationBgm }}</span>
              <el-select class="leftValue" v-else v-model="newUserInfo.educationBgm" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

              <div class="rightBtn">
                <div v-if="showEdit !== 'educationBgm'" @click="statusChanged('educationBgm')">
                  <i class="el-icon-edit"></i>
                </div>
                <div v-else-if="showEdit === 'educationBgm'">
                  <div class="save" @click="clickedSave">
                    <i class="el-icon-document-checked"></i>
                  </div>
                  <div class="cancel" @click="statusChanged('')">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import PublicHeader from '../../components/PublicHeader'

export default {
  name: 'UserSetting',
  components: {PublicHeader},
  data () {
    return {
      userInfo: {
        id: null,
        username: null,
        gender: null,
        age: null,
        educationBgm: null
      },
      newUserInfo: {
        id: null,
        username: null,
        gender: null,
        age: null,
        educationBgm: null
      },
      showEdit: '',
      options: [{
        value: '0',
        label: '小学'
      }, {
        value: '1',
        label: '中学'
      }, {
        value: '2',
        label: '本科'
      }, {
        value: '3',
        label: '研究生'
      }, {
        value: '4',
        label: '博士'
      }]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.userInfo = this.$store.getters.userInfo
      for (const item of this.options) {
        if (Number(item.value) === this.userInfo.educationBgm) {
          this.userInfo.educationBgm = item.label
          break
        }
      }
      this.newUserInfo = JSON.parse(JSON.stringify(this.userInfo))
      // console.log('newUserInfo', this.newUserInfo)
    },
    statusChanged (status) {
      this.showEdit = status
      this.newUserInfo = JSON.parse(JSON.stringify(this.userInfo))
    },
    clickedSave () {
      for (const item of this.options) {
        if (item.label === this.newUserInfo.educationBgm) {
          this.newUserInfo.educationBgm = Number(item.value)
          break
        }
      }

      this.$store.dispatch('submitSettingInfo', this.newUserInfo).then(resp => {
        if (resp.code === 200) {
          this.init()
          this.statusChanged('')
        }
      })
    }
  }
}
</script>

<style scoped>
.content {
  width: 60%;
  margin: 0 auto;
  padding: 20px 0;
}

.detail {
  margin-top: 20px;
}

.card {
  margin-bottom: 10px;
}

.card:last-child {
  margin-bottom: 0;
}

.value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
}

.leftValue {
  color: #409EFF;
  /*color: #F56C6C;*/
  margin: 0 40px;
}

.rightBtn {
  width: 60px;
  margin-right: 40px;
}

.save, .cancel {
  display: inline-block;
}

.save:hover, .cancel:hover {
  cursor: pointer;
}
</style>
